<template>
  <div class="">
    <!-- 顶部导航 -->
    <div class="container">
      <div class="logo" @click="toIndex">
        <div class="logo-img">
          <img src="../assets/login/logo.png" />
        </div>
        <div class="logo-title">挺想租</div>
      </div>
      <div class="search-bar">
        <div>
          <input type="text" v-model.trim="msg" @keyup.enter="toSearch" />
          <button @click="toSearch">搜索</button>
        </div>
        <div>
          <div
            style="display: inline-block; margin: 2% 0 0 0"
            v-for="(item, index) in search"
            :key="index"
          >
            <span style="color: #fff; margin: 0.1rem">{{ item }}</span>
            <el-divider direction="vertical" v-if="index < 3"></el-divider>
          </div>
        </div>
      </div>
      <div class="more">
        <i class="el-icon-shopping-cart-2"></i>
        <span>购物车</span>
        <el-badge class="mark" :value="1" />
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon-headset"></i>
        <span @click.stop="service = !service">在线客服</span>
        <el-divider direction="vertical"></el-divider>
        <span @click.stop="toMore">更多</span>
        <img src="../../static/sort2.png" alt="" />
      </div>
      <!-- 客服聊天界面 -->
      <div v-if="service">
        <Myservice />
      </div>
    </div>
  </div>
</template>

<script>
import Myservice from "./service.vue";
export default {
  components: {
    Myservice,
  },
  data() {
    return {
      search: ["iphone14", "oppo", "vivo", "华为P50"],
      msg: "",
      service: false,
    };
  },
  methods: {
    toIndex() {
      this.$router.push({
        path: "/index",
      });
    },
    toMore() {
      this.$router.push({
        path: "/more",
      });
    },
    toSearch() {
      if (this.msg === "") return alert("请输入商品名称");
      this.$router.push({
        path: "/search",
        query: {
          msg: this.msg,
        },
      });
      this.msg = ""
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 70%;
  left: 50%;
  padding: 1% 0 0.3% 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 3;
}
.logo {
  width: 18%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.logo-img {
  width: 30%;
}
.logo img {
  width: 100%;
  height: 100%;
}
.logo-title {
  margin-left: 4%;
  color: #fff;
  font-size: 0.16rem;
}
.search-bar {
  width: 44%;
  position: relative;
}

.search-bar input {
  height: 0.2rem;
  width: 80%;
  border: solid #fff;
  border-radius: 0.1rem;
  outline: none;
  background-image: url("../../static/search-grey.png");
  background-size: 6% 100%;
  background-repeat: no-repeat;
  text-indent: 6%;
}
.search-bar button {
  background-color: rgb(229, 0, 18);
  border: solid rgb(229, 0, 18);
  color: #fff;
  height: 0.28rem;
  border-radius: 0.1rem;
  position: relative;
  margin-left: -5%;
  margin-top: -100%;
}
.more {
  width: 38%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.more img {
  width: 7%;
  height: 7%;
}
.more span,
.more .el-icon-shopping-cart-2,
.more .el-icon-headset {
  color: rgba(255, 255, 255, 0.852);
  cursor: pointer;
}
.more span:hover {
  opacity: 1.5;
  color: #fff;
}
</style>

<style>
.more .el-badge__content {
  border: none;
  background-color: rgb(229, 0, 18);
}
</style>